<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <!--当前示例页面样式表引用-->
        <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
        <script include="jquery" src="./static/libs/include-lib-local.js"></script>
        <script src="./static/libs/include-openlayers-local.js"></script>
        <script src="./static/data/geojson/arc.js"></script>
        <script type="text/javascript">
            var map = null
            function init() {
                //初始化地图容器
                map = new ol.Map({
                    target: 'mapCon', //地图容器div的ID
                    controls: ol.control.defaults({
                        attributionOptions: {
                            collapsible: true,
                        },
                    }),
                    view: new ol.View({
                        center: [0, 0], //地图初始中心点
                        maxZoom: 28, //最大瓦片显示级数
                        minZoom: 1, //最小瓦片显示级数
                        zoom: 2, //地图初始显示级数
                        projection: 'EPSG:4326',
                    }),
                })
                var tdk = '4c27d6e0e8a90715b23a989d42272fd8' //天地图密钥
                //加载天地图瓦片图层数据
                map.addLayer(
                    new ol.layer.Tile({
                        title: '天地图影像图层',
                        source: new ol.source.XYZ({
                            url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tdk,
                            wrapX: false,
                        }),
                        projection: 'EPSG:4326',
                    })
                )
                map.addLayer(
                    new ol.layer.Tile({
                        title: '天地图矢量注记图层',
                        source: new ol.source.XYZ({
                            url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdk,
                            wrapX: false,
                        }),
                        projection: 'EPSG:4326',
                    })
                )

                var style = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: [127, 255, 0, 0.6],
                        width: 1,
                    }),
                })

                var flightsSource
                var addLater = function(feature, timeout) {
                    window.setTimeout(function() {
                        feature.set('start', new Date().getTime())
                        flightsSource.addFeature(feature)
                    }, timeout)
                }

                var pointsPerMs = 0.1
                var animateFlights = function(event) {
                    var vectorContext = event.vectorContext
                    var frameState = event.frameState
                    vectorContext.setStyle(style)

                    var features = flightsSource.getFeatures()
                    for (var i = 0; i < features.length; i++) {
                        var feature = features[i]
                        if (!feature.get('finished')) {
                            var coords = feature.getGeometry().getCoordinates()
                            var elapsedTime = frameState.time - feature.get('start')
                            var elapsedPoints = elapsedTime * pointsPerMs

                            if (elapsedPoints >= coords.length) {
                                feature.set('finished', true)
                            }

                            var maxIndex = Math.min(elapsedPoints, coords.length)
                            var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex))

                            //根据要素来描绘出线条
                            vectorContext.drawGeometry(currentLine)
                        }
                    }
                    //继续动画效果
                    map.render()
                }

                flightsSource = new ol.source.Vector({
                    wrapX: false,
                    loader: function() {
                        var url = './static/data/geojson/flights.json'
                        fetch(url)
                            .then(function(response) {
                                return response.json()
                            })
                            .then(function(json) {
                                var flightsData = json.flights
                                for (var i = 0; i < flightsData.length; i++) {
                                    var flight = flightsData[i]
                                    var from = flight[0]
                                    var to = flight[1]

                                    //创建一个两个地点之间的弧段
                                    var arcGenerator = new arc.GreatCircle({ x: from[1], y: from[0] }, { x: to[1], y: to[0] })

                                    var arcLine = arcGenerator.Arc(100, { offset: 10 })
                                    if (arcLine.geometries.length === 1) {
                                        var line = new ol.geom.LineString(arcLine.geometries[0].coords)
                                        // line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));

                                        var feature = new ol.Feature({
                                            geometry: line,
                                            finished: false,
                                        })
                                        //添加动画的特性与延迟所有功能并不在同一时间开始
                                        addLater(feature, i * 50)
                                    }
                                }
                                map.on('postcompose', animateFlights)
                            })
                    },
                })

                var flightsLayer = new ol.layer.Vector({
                    source: flightsSource,
                    style: function(feature) {
                        //如果动画仍然是活跃的特性,不渲染图层样式的特性
                        if (feature.get('finished')) {
                            return style
                        } else {
                            return null
                        }
                    },
                })
                map.addLayer(flightsLayer)
            }
        </script>
    </head>

    <body onload="init()">
        <div id="mapCon"></div>
    </body>
</html>
